<!--
 * @Author: liaoxing
 * @Date: 2021-12-29 10:13:27
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-02-28 15:29:53
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\views\business\reportcenter\report\analys.vue
-->
<template>
  <div class="analysBox">
    <!-- <div v-loading="loadingPage">101</div> -->
    <el-table
      v-loading="loadingPage"
      :data="tableData"
      border
      height="870"
      :show-header="false"
      :span-method="objectSpanMethod"
      :cell-style="setCellStyle"
      style="width: 100%">
      <el-table-column
        v-for="(item, index) in tableCols"
        :key="'tableCols' + index + item"
        :prop="item">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tableInfo from "@/constant/tableInfo3.json"
import styleInfo from "@/constant/styleInfo.json"
export default {
  name: "analys",
  data () {
    return {
      tableData: [],
      tableCols: [],
      tableData: null,
      tableStyleData: null,
      loadingPage: false
    }
  },
  created () {
  },
  mounted () {
    this.loadingPage = true
    const {rows, styles} = tableInfo
    const rowsKeys = Object.keys(rows)
    let newStyleInfo = []
    let newDataInfo = []
    rowsKeys.forEach(item => {
      if (!rows[item]['cells']) return
      const cellsData = rows[item]['cells']
      let keys = Object.keys(cellsData)
      let tempDataInfo = {}
      let tempStyleInfo = []
      keys.forEach(i => {
        if (cellsData[i].display == "number") {
          tempDataInfo[i] = (cellsData[i].text * 1).toFixed(cellsData[i].decimalPlaces * 1)
        } else {
          tempDataInfo[i] = cellsData[i].text
        }
        tempStyleInfo[i] = {}
        if (cellsData[i].merge) {
          tempStyleInfo[i].merge = this.judgeMerge(cellsData[i].merge, item, i)
          for(let l = 0; l < cellsData[i].merge[1]; l++) {
            tempDataInfo[i * 1 + l + 1 + ''] = ''
          }
        }
        if (cellsData[i].style || cellsData[i].style === 0 ) {
          // tempStyleInfo[i].style = this.judgeStyle(cellsData[i].style)
          tempStyleInfo[i].style = this.getElementAttr(styles[cellsData[i].style])
        }
      })
      newStyleInfo.push(tempStyleInfo)
      newDataInfo.push(tempDataInfo)
    })
    let colsKeys = Object.keys(newDataInfo[0])
    for(let i = 0; i < newDataInfo.length; i++) {
      if (colsKeys.length < Object.keys(newDataInfo[i]).length) {
        colsKeys = Object.keys(newDataInfo[i])
      }
    }
    this.tableCols = colsKeys
    this.tableData = newDataInfo
    this.tableStyleData = newStyleInfo
    console.log(colsKeys, newDataInfo)
    // setTimeout(() => {
    //   this.loadingPage = false
    // }, 5000)
    // this.$nextTick(() => {
    //   this.loadingPage = false
    // })
  },
  methods: {
    /* 判断merge */
    judgeMerge (merge, rows, cols) {
      return {
        rows: rows,
        cols: cols,
        colsMerge: merge
      }
    },
    /* 获取标签属性 */
    getElementAttr (style) {
      let temp = {}
      for (let i in style) {
        switch (i) {
          case "font":
            for (let i2 in style[i]) {
              switch (i2) {
                case "bold":
                  temp["fontWeight"] = "bold"
                  break
                case "size":
                  temp["fontSize"] = style[i].size + 'px'
                  break
              }
            }
            break
          case "align": 
            temp['textAlign'] = style.align
            break
          default:
            Object.assign(temp, styleInfo[i])
        }
      }
      return temp
    },
    /* 单元格合并 */
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      let item = this.tableStyleData[rowIndex]
      for(let i = 0; i < item.length; i++) {
        let info = item[i]
        if (info && info.merge) {
          const merge = info.merge
          if (columnIndex == merge.cols) {
            return {
              rowspan: 1,
              colspan: merge.colsMerge[1] + 1
            }
          }
          if (columnIndex > merge.cols * 1 && columnIndex <= merge.cols * 1 + merge.colsMerge[1]) {
            return {
              rowspan: 1,
              colspan: 0
            }
          }
        }
      }
      if(rowIndex == this.tableStyleData.length - 1) {
        this.loadingPage = false
      }
    },
    /* 单元格样式 */
    setCellStyle ({row, column, rowIndex, columnIndex}) {
      let item = this.tableStyleData[rowIndex]
      if (item[columnIndex] && item[columnIndex].style) {
        if (columnIndex == 0 && item[columnIndex].style.borderColor) {
          item[columnIndex].style['borderLeft'] = "1px solid #dfe6ec"
        }
        
        if(item[columnIndex].style.borderColor) {
          if (rowIndex == 0) {
            item[columnIndex].style['borderTop'] = "1px solid #dfe6ec"
          }
          if (columnIndex == 0) {
            item[columnIndex].style['borderLeft'] = "1px solid #dfe6ec"
          }

          if (rowIndex > 0) {
            let lastItem = this.tableStyleData[rowIndex - 1]
            if (lastItem[columnIndex] && (!lastItem[columnIndex].style || !lastItem[columnIndex].style.borderColor)) {
              item[columnIndex].style['borderTop'] = "1px solid #dfe6ec"
            }
            if (!lastItem[columnIndex]) {
              item[columnIndex].style['borderTop'] = "1px solid #dfe6ec"
            }
          }
        }
        
        return item[columnIndex].style
      }
    }
  }
}
</script>

<style lang="less">
.analysBox{
  width: 99.7%;
  height: calc(100vh - 85px);
  position: relative;
  box-sizing: border-box;
  padding: 16px;
  overflow: scroll;
  .el-table{
    &::before, &::after{
      background: unset;
    }
  }
  .el-table--border,
  .el-table--group {
    // border-color: rgb(168, 168, 168);
    border-color: transparent;
  }
  
  .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    // background-color: rgb(168, 168, 168);
    border-color: transparent;
  }
  
  .el-table td,
  .el-table--border th,
  .el-table th.is-leaf {
    // border-bottom-color: rgb(168, 168, 168);
    border-color: transparent;
  }
  
  .el-table--border td,
  .el-table--border th {
    // border-right-color: rgb(168, 168, 168);
    border-color: transparent;
  }
}

</style>